{extend name="layout/layout" /}
{block name="title"}轻食兔{/block}
{block name="container"}

<!-- Banner Begin -->
<div class="glide banner" id="index-banner">
    <div class="glide__track" data-glide-el="track">
        <div class="glide__slides">
            <?php foreach($banners as $v): ?>
            <div class="glide__slide">
                <img src="<?php echo $v['image']; ?>" alt="">
            </div>
            <?php endForeach; ?>
        </div>
    </div>
</div>
<!-- Banner End -->

<!-- Brand-Section Begin -->
<section class="brand-section">
    <div class="brand-bg"></div>
    <div class="container">
        <div class="brand-wrap">
            <div class="brand-lf">
                <img src="/template/assets/images/index-brand-el-2.png">
                <img class="tuzi" src="/template/assets/images/index-brand-el-3.png">
            </div>
            <div class="brand-rt">
                <p class="section-title-en">Brand story</p>
                <h2 class="section-title">品牌故事</h2>
                <p class="section-desc">
                    轻食兔,倡导“低脂低卡”的健康<br>生活方式以“研发好吃无负担的美食”为使命<br>致力于好吃不胖的高端潮牌<br>食品研发帮助人们实现自由享受美食的愿望
                </p>
                <img id="el-4" src="/template/assets/images/index-brand-el-4.png">
            </div>
        </div>
    </div>
</section>
<!-- Brand-Section End -->

<!-- Product-Section Begin -->
<section class="product-section">
    <div class="product-bg">
        <img class="tuzi" src="/template/assets/images/index-brand-el-3.png">
    </div>
    <div class="product-wrap">
        <div class="product-hd">
            <p class="section-title-en">Product<br>introduction</p>
            <h2 class="section-title">产品介绍</h2>
            <img id="el-color" src="/template/assets/images/index-brand-el-4.png">
        </div>
        <div class="product-bd">
            <div class="glide product-slides" id="product-slides">
                <div class="glide__track" data-glide-el="track">
                    <div class="glide__slides">
                        <?php foreach($products as $v): ?>
                        <div class="glide__slide">
                            <img src="<?php echo $v['indeximage']; ?>" alt="">
                        </div>
                        <?php endForeach; ?>
                    </div>
                </div>
                <div class="product-arrows" data-glide-el="controls">
                    <a href="#" data-glide-dir="<">
                        <img src="/template/assets/images/index-product-arrow-left.png">
                    </a>
                    <a href="#" data-glide-dir=">">
                        <img src="/template/assets/images/index-product-arrow-right.png">
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Brand-Section End -->

<!-- Product-Section Begin -->
<section class="lab-section">
    <div class="lab-wrap">
        <div class="lab-hd">
            <img src="/template/assets/images/index-lab.jpeg">
        </div>
        <div class="lab-bd">
            <p class="section-title-en">Gourmet Lab</p>
            <h2 class="section-title">美食情绪实验室</h2>
            <p class="section-desc">轻食兔成立轻食兔美食情绪研究院<br>倡导美食与健康共存的生活状态</p>
        </div>
    </div>
    <img class="tuzi" src="/template/assets/images/index-brand-el-3.png" alt="" srcset="">
    <img class="tuzi tuzi2" src="/template/assets/images/index-brand-el-3.png" alt="" srcset="">
</section>
<!-- Product-Section End -->

<script>
    const bannerGlide = new Glide('#index-banner', {
        type: 'carousel',
        gap: 0,
        animationTimingFunc: 'ease',
        autoplay: 3000,
    })
    const productGlide = new Glide('#product-slides', {
        gap: 0,
        animationTimingFunc: 'ease',
        rewind: false,
        perView: 2,
        peek: {
            before: window.innerWidth * 1 / 9,
            after: window.innerWidth * 2 / 9,
        },
        breakpoints: {
            767: {
                perView: 1,
                peek: 50,
            }
        }
    })

    function initGSAP() {
        gsap.registerPlugin(ScrollTrigger)
        let tl = gsap.timeline({ scrollTrigger: { trigger: '.brand-section', start: "top 80%" } })

        tl.from('.brand-section .brand-bg', { xPercent: -100, duration: 0.5 })
            .from('.brand-section .brand-lf', { x: -1000, rotation: -360, duration: 1 })
            .from('.brand-section .section-title-en', { y: 100, opacity: 0, duration: 0.3 })
            .from('.brand-section .section-title', { y: 100, opacity: 0, duration: 0.3 })
            .from('.brand-section .section-desc', { y: 100, opacity: 0, duration: 0.3 })
            .from('.brand-section .tuzi', { y: 100, duration: 0.1 })

        let t2 = gsap.timeline({ scrollTrigger: { trigger: '.product-section', start: "top 80%" } })
        t2.from('.product-section .product-bg', { xPercent: 100, duration: 0.5 })
            .from('.product-section .section-title-en', { y: 100, opacity: 0, duration: 0.3 })
            .from('.product-section .section-title', { y: 100, opacity: 0, duration: 0.3 })
            .from('.product-section .glide__slides', { xPercent: 100, opacity: 0, duration: 0.5 })
            .from('.product-section .product-arrows', { xPercent: -100, opacity: 0, duration: 0.3 })

        let t3 = gsap.timeline({ scrollTrigger: { trigger: '.lab-section', start: "top 80%" } })
        t3.from('.lab-section .lab-hd', { scale: 2, duration: 1 })
            .from('.lab-section .section-title-en', { y: 100, opacity: 0, duration: 1 }, 0.1)
            .from('.lab-section .section-title', { y: 100, opacity: 0, duration: 1 }, 0.2)
            .from('.lab-section .section-desc', { y: 100, opacity: 0, duration: 1 }, 0.4)
            .from('.lab-section .tuzi', { y: 100, duration: 0.1 })
            .from('.lab-section .tuzi2', { xPercent: 100, duration: 0.1 })
    }

    bannerGlide.mount()
    productGlide.mount()
    setTimeout(() => {
        initGSAP();
    }, 500);
</script>

{/block}
